<script setup>
import { MoreFilled } from '@element-plus/icons-vue'

const props = defineProps({
  checkedFiles: {
    type: Array,
    default: () => [],
  },
  viewType: String,
  fileList: {
    type: Array,
    default: () => [],
  },
  file: {
    type: Object,
    default: () => ({}),
  },
})
const emits = defineEmits([
  'update:checkedFiles',
  'fileClick',
  'fileDblclick',
  'fileContextmenu',
  'bodyContextmenu',
  'renameFinish',
  'fileMoreClick',
])
const tableRef = ref()
let timer = null
let selectionTrigger = true

function fileChecked(v, file) {
  if (v) {
    emits('update:checkedFiles', [...props.checkedFiles, file])
  } else {
    const arr = [...props.checkedFiles]
    const index = arr.findIndex((i) => i.resourceId === file.resourceId)
    arr.splice(index, 1)
    emits('update:checkedFiles', arr)
  }
}

function handleClick(file) {
  if (timer) {
    clearTimeout(timer)
  }
  timer = setTimeout(() => {
    emits('fileClick', file)
  }, 200)
}

function handelDblclick(file) {
  if (timer) {
    clearTimeout(timer)
  }
  emits('fileDblclick', file)
}

function handleTableSelection(rows) {
  if (selectionTrigger) {
    emits('update:checkedFiles', rows)
  }
}

function fileType({ resourceType }) {
  if (['xlsx', 'xls'].includes(resourceType)) {
    return 'excel'
  }
  if (['doc', 'docx'].includes(resourceType)) {
    return 'word'
  }
  if (['ppt', 'pptx'].includes(resourceType)) {
    return 'ppt'
  }
  if (['png', 'jpg', 'jpeg', 'gif'].includes(resourceType)) {
    return 'img'
  }
  if (['mp4', 'mov'].includes(resourceType)) {
    return 'video'
  }
  if (['mp3'].includes(resourceType)) {
    return 'music'
  }
  if (['zip', 'rar', '7z'].includes(resourceType)) {
    return 'zip'
  }
  if (resourceType === 'folder') {
    return 'folder'
  }
  if (resourceType === 'drawio') {
    return 'drawio'
  }
  if (resourceType === 'mind') {
    return 'mind'
  }
  return 'default'
}

watch(
  () => props.viewType,
  (v) => {
    if (v === 'table') {
      nextTick(() => {
        selectionTrigger = false
        props.checkedFiles.forEach((i) => {
          tableRef.value.toggleRowSelection(i)
        })
        selectionTrigger = true
      })
    }
  }
)
</script>

<template>
  <div class="file-list-body" @contextmenu.self="emits('bodyContextmenu', $event)">
    <div :class="`file-list-body-${props.viewType}`" @contextmenu.stop.self="emits('bodyContextmenu', $event)">
      <template v-if="props.viewType === 'icon'">
        <div
          v-for="item in props.fileList"
          :key="item.resourceId"
          :class="{
            checked:
              props.checkedFiles.some((i) => i.resourceId === item.resourceId) ||
              props.file?.resourceId === item.resourceId,
          }"
          class="file-card"
          @click="handleClick(item)"
          @dblclick="handelDblclick(item)"
          @contextmenu="emits('fileContextmenu', $event, item)">
          <div class="file-card-operation">
            <el-checkbox
              :checked="props.checkedFiles.some((i) => i.resourceId === item.resourceId)"
              @change="fileChecked($event, item)"
              @click.stop
              @dblclick.stop></el-checkbox>
            <el-icon @click.stop="emits('fileMoreClick', $event, item)" @dblclick.stop>
              <MoreFilled />
            </el-icon>
          </div>
          <SvgIcon
            :color="`var(--file-${fileType(item)}-color)`"
            :name="item.resourceType === 'folder' ? 'folder' : `file-${fileType(item)}`"
            size="80px"></SvgIcon>
          <div :title="item.resourceName" class="file-name">
            <el-input
              v-if="item.isRename"
              v-model="item.resourceName"
              size="small"
              @blur="(e) => emits('renameFinish', e.target.value)"
              @click.stop
              @dblclick.stop></el-input>
            <span v-else>{{ item.resourceName }}</span>
          </div>
        </div>
      </template>
      <el-table
        v-else
        ref="tableRef"
        :data="props.fileList"
        @rowClick="handleClick"
        @rowContextmenu="(row, column, e) => emits('fileContextmenu', e, row)"
        @selectionChange="handleTableSelection">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="文件名" prop="resourceName">
          <template v-slot="{ row }">
            <el-input
              v-if="row.isRename"
              v-model="row.resourceName"
              size="small"
              @blur="(e) => emits('renameFinish', e.target.value)"
              @click.stop></el-input>
            <span v-else>{{ row.resourceName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" prop="resourceType" width="100px"></el-table-column>
        <el-table-column label="大小" prop="resourceSize" width="80px"></el-table-column>
        <el-table-column label="最后更新时间" prop="updateTime"></el-table-column>
        <el-table-column label="上传时间" prop="createTime"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.file-list-body {
  flex: 1;
  overflow: hidden auto;
  padding-top: 8px;

  .file-list-body-icon {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 150px);
  }

  .file-list-body-table {
  }

  .file-card {
    @include use-flex(center, '', column);
    cursor: pointer;
    position: relative;
    height: 145px;
    width: 139px;
    text-align: center;
    border-radius: 5px;
    user-select: none;
    margin-bottom: 15px;

    &:hover,
    &.checked {
      background-color: var(--elp-color-info-light-9);

      .file-card-operation {
        opacity: 1;
      }
    }

    .file-card-operation {
      position: absolute;
      left: 0;
      top: 3px;
      height: 20px;
      width: 100%;
      padding: 0 5px;
      @include use-flex(center, space-between);
      opacity: 0;
    }

    .svg-icon {
      margin-top: 10px;
      flex-shrink: 0;
    }

    .file-name {
      font-size: 13px;
      width: 100%;
      overflow: hidden;
      padding: 11px 8px 0px 8px;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
  }
}
</style>
